<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="false" splitLine :zIndex="99999" :scrollTop="0" title=""
			backgroundColor="#fff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<image v-if="share" @click="handleToIndex" src="https://static.wddzq.com/static/shouye-xuanzhong.png"
					style="width: 30rpx;height: 30rpx;padding: 15rpx;background-color: #f2f2f2;border: 2rpx solid #ddd;border-radius: 50%;" />
				<u-icon v-else name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
				<view style="width: 10rpx"></view>
				<image mode="aspectFill" class="active-boss-img" style="width: 58rpx;height: 58rpx;"
					@click="toUserPersonal(detail.createUser.userId)" :src="detail?.createUser?.headPic"></image>
				<view style="width: 10rpx"></view>
				<text style="font-size: 28rpx;color: #333;"
					@click="toUserPersonal(detail.createUser.userId)">{{detail?.createUser?.nickname}}</text>
				<image src="../../cutout/组 32@1x.png" style="height: 17px;width:37px"></image>
			</view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}"></view>
		<!-- <view style="position: absolute;right: 32rpx; top: 200rpx;background-color: #FFB3AE;">
			<image src="../../cutout/组 31@1x.png" style="z-index: 3;width:57px; height: 24px;"></image>
		</view> -->
		<view class="swiperTop">
			<u-swiper v-if="(detail.picListV2?.split('|') || []).length >= 1" :autoplay="false"
				@change="handleSwiperChange" @click="handleSwiperClick" :list="detail.picListV2?.split('|') || []"
				:height="images[current]?.height || 732" :current="current" indicatorMode="dot"
				indicatorActiveColor="#FFB803" :indicator="true" indicatorStyle="bottom: 50rpx">
			</u-swiper>
			<u-swiper v-else :autoplay="false" indicatorMode="dot" @change="handleSwiperChange"
				@click="handleSwiperClick" :list="detail.picListV2?.split('|') || []"
				:height="images[current]?.height || 732" :current="current">
			</u-swiper>
			<view class="swiperBottom">
				<view style="position: absolute;right: 32rpx; top: 12rpx;margin-top: -200rpx;">
					<image src="../../cutout/组 31@1x.png" style="z-index: 3;width:57px; height: 24px;"
						@click="handleReportClick"></image>
				</view>
				<view class="swiperTitle">{{detail.title}}</view>
				<view style="margin-bottom: 18rpx;margin-top: 16rpx;">
					<tui-tag backgroundColor="#FEF7D5" color="#FDC35F" shape="circle">
						<!-- 
						<image style="width: 26rpx;height: 26rpx;margin-right: 4rpx;" :src="detail.categoryIcon"></image> 
						<text class="tab-item-text">{{detail.categoryName}} </text>
						-->
						<image style="width: 1rpx;height: 26rpx;"></image>
						{{detail.categoryName}}
					</tui-tag>
					<tui-tag backgroundColor="#FAE7DC" color="#F28C54" type="" shape="circle"
						v-if="detail.discountType == 1">
						<image style="width: 1rpx;height: 26rpx;"></image>
						女生优惠
					</tui-tag>&nbsp;
					<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="detail.payWay == 1">
						<image style="width: 1rpx;height: 26rpx;"></image>
						线上支付
					</tui-tag>
					<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="detail.payWay == 2">
						<image style="width: 1rpx;height: 26rpx;"></image>
						线下收费
					</tui-tag>
				</view>
				<!-- 	<view style="flex: 1;text-align: right;" @click="handleMapLocation">
					<image style="width: 50rpx;height: 50rpx"
						src="https://static.wddzq.com/static/daohangtubiao.png"></image>
				</view> -->
				<view class="active-addr" style="margin-top: 16rpx;color: #fff;">
					<tui-icon name="gps" size="16" color="#fff"></tui-icon>
					<text v-if="detail.distanceShow">&nbsp;{{detail.distanceShow}}&nbsp;·&nbsp;</text>
					<text>{{detail.locationName}}</text>
				</view>
				<view class="active-time" style="color: #fff;margin-top: 16rpx;">
					<tui-icon name="time" size="16" color="#fff"></tui-icon>
					<text>&nbsp;时间&nbsp;{{detail.dateShow}}</text>
				</view>
				<view style="position: absolute;top:260rpx;right: 68rpx;" @click="handleChooseLocation">
					<image src="../../cutout/组 30@1x.png" style="width:68rpx;height:68rpx;"></image>
				</view>
				<view class="active-name" style="color: #fff;margin-top: 16rpx;font-size: 30rpx;">
					报名人数
				</view>
				<view style="margin-top: 20rpx;">
					<image style="width: 90rpx;height: 90rpx;border-radius: 45rpx;z-index: 2;"
						:src="detail?.createUser?.headPic"></image>
					<view style="margin-top: -40rpx;">
						<image src="../../cutout/组 32@1x.png"
							style="height: 13px;width:34px;z-index: 3;position: absolute;left: 34rpx;"></image>
					</view>
				</view>
				<view @click="handleListOpen" style="position: absolute;right: 35px;">
					<view class="active-number">
						<text>仅剩{{ detail.maxSignUpCount - detail.signUpCount }}个名额</text>
						<tui-icon name="arrowright" color="#B2B2B4" size="20"></tui-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- <image style="display: none;" v-for="(item, index) in detail.picListV2?.split('|') || []" :src="item" :data-index="index" @load="handleLoadImage"></image> -->
		<!-- 活动详情 -->
		<view class="active-item-top mb-18 br">
			<!-- <view class="active-item-bg" v-if="detail.chargeType === 1">
				<view class="active-item-right-text-price">￥{{detail.priceShow}}</view>
				<view style="font-size: 24rpx;color: #fff;" >起/每人</view>
			</view> -->
			<view class="title activeTab">活动详情</view>
			<view class="active-text">一起来没有天花板的地方露营烧烤吧!</view>
			<view class="active-text">这里的湖光山色完全不输于香港的麦理浩径</view>
			<view class="active-text">有可以烧烤篝火的山顶平台</view>
			<view class="active-text">在松树林里的吊床上安然入睡</view>
			<view class="active-text">一起来没有天花板的地方露营烧烤吧!</view>
			<view class="active-text">这里的湖光山色完全不输于香港的麦理浩径</view>
			<view class="active-text">有可以烧烤篝火的山顶平台</view>
			<view class="active-text">在松树林里的吊床上安然入睡</view>
			<!-- <view class="active-item-bg" v-if="detail.chargeType === 2">
				<image src="https://static.wddzq.com/static/jiagebeijing.png"></image>
				<view class="active-item-right-text-price" style="margin-top: 44rpx;">{{detail.priceShow}}</view>
			</view> -->
			<!-- <view class="active-item-right">
				<view class="active-item-right-text">
					<view>{{detail.title}}</view>
					<view>
						<text class="active-item-right-text-unit">¥</text>
						<text class="active-item-right-text-price">{{detail.priceShow}}</text>
					</view>
				</view>
				<view class="active-time">
					<tui-icon name="time" size="12" color="#000"></tui-icon>
					<image style="width: 28rpx;height: 28rpx;" src="https://static.wddzq.com/static/huodongshijian_detail.png"></image>
					<text>&nbsp;活动时间&nbsp;{{detail.dateShow}}</text>
				</view>
				<view class="active-addr" style="margin-top: 16rpx;">
					<image style="width: 28rpx;height: 28rpx;" src="https://static.wddzq.com/static/huodongxingshi_detail.png"></image>
					<text v-if="detail.formType === 1">&nbsp;活动形式：&nbsp;不限男女</text>
					<text v-if="detail.formType === 2">&nbsp;活动形式：&nbsp;仅限女生参加</text>
					<text v-if="detail.formType === 3">&nbsp;活动形式：&nbsp;仅限男生参加</text>
					<text v-if="detail.formType === 4">&nbsp;活动形式：&nbsp;限{{detail.maxManCount}}男{{detail.maxWomanCount}}女参加</text>
					<text v-if="detail.formType === 4">&nbsp;活动形式：&nbsp;剩余{{detail.leaveManCount}}男{{detail.leaveWomanCount}}女可参加</text>
				</view>
			</view> 
			<map id="maps" style="width: 100%; height: 300rpx;" :longitude="club.clubLng" :latitude="club.clubLat" scale="16" show-location>
			</map>
			-->
		</view>
		<!-- 详情图片 -->
		<view class="box p-22 mb-18">
			<!-- <view class="tab-container">
				<view class="tab-item activeTab">
					<text class="tab-item-text">活动描述</text>
				</view>
			</view> -->
			<view class="title activeTab">活动描述</view>
			<!-- <view class="content" style="white-space:pre-wrap;">{{ detail.describeContent?.replace(/\↵/g, '\n') }}</view> -->
			<view class="content">
				<!--  v-if="detail.describePic" -->
				<!-- <image :src="detail.describePic" mode="widthFix"></image> -->
				<image src="../../cutout/bg@2x.png"></image>
			</view>
		</view>

		<!--    活动套餐-->
		<!-- <view v-if="detail.merchantProductVO" class="active-item-wrapper" @click="navigateToPack">
			<view class="active-header-wrapper">
				<image class="header-title-icon" src="/static/detail/team.png" />
				<text class="header-title">活动套餐</text>
			</view>

			<view class="active-content-wrapper">
				<image class="content-image" :src="detail.merchantProductVO.productPic" />
				<view class="active-content-text-wrapper">
					<text class="content-text-title">{{detail.merchantProductVO.productName}}</text>
					<text class="content-text-des">点击查看详情</text>
					<view class="content-text-widget-wrapper">
						<view class="content-text-price-wrapper">
							<text class="content-text-price-icon">¥</text>
							<text class="content-text-price">{{detail.merchantProductVO.price}}</text>
						</view>
						<view class="content-text-icon">补贴价</view>
						<text class="content-text-original-price">¥{{detail.merchantProductVO.originalPrice}}</text>
					</view>
				</view>
			</view>
		</view>
 -->
		<!-- 报名人数 -->
		<!-- <view class="active-member p-22 mb-18 br">
			<view class="active-header" style="margin-bottom: 24rpx;" @click="handleListOpen">
				<text class="title" style="margin-bottom: 0;">报名人数</text>
				<view class="active-number">
					<text>仅剩{{ detail.maxSignUpCount - detail.signUpCount }}个名额</text>
					<tui-icon name="arrowright" color="#333" size="20"></tui-icon>
				</view>
			</view>
			<view class="active-images">
				<view class="active-images-item" v-for="item in (detail?.userSignUpVoList || [])"
					@click="toUserPersonal(item.userId)">
					<image class="active-image-avator" :src="item.headPic" mode="aspectFill"></image>
					<image v-if="item.gender === 1" class="active-image-sex" style="background-color: #E5F1FF;"
						src="https://static.wddzq.com/static/nan.png"></image>
					<image v-if="item.gender === 2" class="active-image-sex" style="background-color: #FFB3AE;"
						src="https://static.wddzq.com/static/nv.png"></image>
				</view>
			</view>
		</view> -->
		<!-- 组织者 -->
		<!-- <view class="box p-22 mb-18">
			<view class="title">组织者</view>
			<view class="active-boss">
				<view
					style="position: relative;width: 96rpx;height: 102rpx;display: flex;align-items: center;justify-content: center;">
					<image mode="aspectFill" class="active-boss-img" @click="toUserPersonal(detail?.createUser?.userId)"
						:src="detail?.createUser?.headPic"></image>
					<image v-if="detail?.createUser?.vipOrNot"
						style="position: absolute;top:0;left: 0;width: 96rpx;height: 102rpx;"
						src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
				</view>
				<view class="active-boss-info" @click="toUserPersonal(detail.createUser.userId)">
					<text class="active-boss-name">{{detail?.createUser?.nickname}}</text>
					<view>
						<image v-if="detail?.createUser?.authenticationType === 1"
							src="https://static.wddzq.com/static/gerenrenzheng.png"></image>
						<image v-else-if="detail?.createUser?.authenticationType === 2"
							src="https://static.wddzq.com/static/juleburenzheng-big.png"></image>
						<image v-else src="https://static.wddzq.com/static/huiyuan-moren.png"></image>
						<text v-if="detail?.createUser?.authenticationType === 1">{{detail?.createUser?.authenticationJobName}}</text>
						<text v-else-if="detail?.createUser?.authenticationType === 2">{{detail?.createUser?.authenticationClubName}}</text>
						<text v-else>未认证</text>
					</view>
				</view>
				<view class="active-lx" @click="clickCreateUserWechat">
					<image src="https://static.wddzq.com/static/weixin.png"></image>
					<text>微信</text>
				</view>
				<view class="active-lx" @click="clickCreateUserPhone">
					<image src="https://static.wddzq.com/static/Group254.png"></image>
					<text>电话</text>
				</view>
			</view>
		</view> -->

		<!-- 退款规则 -->
		<!-- <view class="box p-22 mb-18">
			<view class="title">退款规则</view>
			<view class="content" v-if="detail.cancelFreeTypeDesc">该活动有无责取消申明,在 {{ detail.cancelFreeTypeDesc }} 前可以无责取消,
				超过时间, 将不可取消</view>
			<view class="content" v-if="!detail.cancelFreeTypeDesc">该活动报名后不可取消</view>
		</view>
		<view class="box p-22 mb-18">
			<view class="title">隐私政策</view>
			<view class="content">这里是一段隐私政策文字内容。这里是一段退款规则描述性文字内容</view>
		</view> -->
		<view style="height: 150rpx;"></view>

		<view class="active-bottom">
			<!--      <image class="chat-btn" src="/static/detail/message-icon.png"/>-->
			<view class="share-box">
				<!-- <button class="share-box-btn"></button> -->
				<image src="../../cutout/组 18@1x.png" style="height: 16px;width: 16px;" @click="handleGroupClick">
				</image>
				<view class="share-box-text">群组</view>
			</view>
			<view class="share-box">
				<!-- <button class="share-box-btn"></button> -->
				<image src="../../cutout/联系@1x.png" style="height: 16px;width: 16px;" @click="handleConnectionClick">
				</image>
				<view class="share-box-text">联系</view>
			</view>
			<view class="share-box2">
				<!-- <button class="share-box-btn"></button> -->
				<image src="../../cutout/帮组@1x.png" style="height: 16px;width: 16px;" @click="handleHelpGroupClick">
				</image>
				<view class="share-box-text">帮组</view>
			</view>
			<view class="share-box">
				<!-- <button class="share-box-btn"></button> -->
				<image src="../../cutout/fx@1x.png" style="height: 16px;width: 16px;" @click="handleShareClick"></image>
				<view class="share-box-text">{{num}}</view>
			</view>
			<u-button v-if="detail.status === 50 && detail.signUpStatus == 1" class="share-btn"
				customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;"
				color="#63D1D6">
				<view class="share-btn-bm">已取消</view>
			</u-button>
			<u-button
				v-else-if="(detail.status === 20 || detail.status === 30 || detail.status === 40) && detail.signUpStatus == 1"
				class="share-btn"
				customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;"
				color="#63D1D6">
				<view class="share-btn-bm">已截止</view>
			</u-button>
			<u-button v-else-if="detail.signUpStatus == 2" class="share-btn"
				customStyle="width: 334rpx; margin: 0; display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;"
				color="#63D1D6">
				<view class="share-btn-bm">报名成功</view>
			</u-button>
			<u-button v-else-if="detail.signUpStatus == 3" @click="handleSubmit" class="share-btn"
				customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;"
				color="#63D1D6">
				<view class="share-btn-bm">重新报名</view>
			</u-button>
			<u-button v-else-if="detail.signUpStatus == 1" class="share-btn" @click="handleSubmit"
				customStyle="width: 334rpx; display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;margin: 0;"
				color="#63D1D6">
				<view class="share-btn-bm" v-if="detail.chargeType === 2">立即报名</view>
				<view class="share-btn-bm" v-if="detail.chargeType === 1">立即出发(¥{{ detail.priceShow }})</view>
				<view class="share-btn-yh" v-if="detail.discountType === 1 && detail.discountedPrice">女生优惠
					-{{ detail.discountedPrice }}</view>
			</u-button>
		</view>

		<u-popup :show="listShow" :round="18" @close="handleListClose">
			<view style="position: relative;">
				<view class="popup-title">仅剩 {{ detail.maxSignUpCount - detail.signUpCount }} 个名额</view>
				<view class="popup-close" @click="handleListClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="member-list">
					<view class="member-item" v-for="item in (detail?.userSignUpVoList || [])">
						<image :src="item.headPic" @click="toUserPersonal(item.userId)"></image>
						<view class="member-box">
							<view class="member-content">
								<view class="member-title" @click="toUserPersonal(item.userId)">{{ item.nickname }}
								</view>
								<image v-if="item.gender === 1" style="background-color: #E5F1FF;"
									src="https://static.wddzq.com/static/nan.png"></image>
								<image v-if="item.gender === 2" style="background-color: #FFB3AE;"
									src="https://static.wddzq.com/static/nv.png"></image>
								<view v-if="detail?.myActivity" class="member-concat">
									<view class="active-lx" @click="handleOpenActiveWechat(item)">
										<image style="width: 50rpx;height: 50rpx"
											src="https://static.wddzq.com/static/weixin.png"></image>
									</view>
									<view class="active-lx" @click="handleOpenActivePhone(item)">
										<image style="width: 50rpx;height: 50rpx"
											src="https://static.wddzq.com/static/Group254.png"></image>
									</view>
								</view>
							</view>
							<text class="member-desc">{{ item.signature }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-modal :show="showPhone" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleClosePhone">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">手机号</view>
				<view class="modal-content">
					请拨打联系人手机号
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.detail?.createUser?.phone}}</view>
					<text>联系人手机号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 72rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e"
						text="拨打电话" @click="handleCallPhone"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showWechat" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseWechat">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">微信号</view>
				<view class="modal-content">
					请添加联系人微信
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.detail?.createUser?.wechat}}</view>
					<text>联系人微信号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e"
						text="复制" @click="handleCopyWechat"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showActivePhone" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseActivePhone">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">手机号</view>
				<view class="modal-content">
					请拨打联系人手机号
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.currentPerson?.phone}}</view>
					<text>联系人手机号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 72rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e"
						text="拨打电话" @click="handleCallActivePhone"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showActiveWechat" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseActiveWechat">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">微信号</view>
				<view class="modal-content">
					请添加联系人微信
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.currentPerson?.wecaht}}</view>
					<text>联系人微信号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e"
						text="复制" @click="handleCopyActiveWechat"></u-button>
				</view>
			</view>
		</u-modal>


		<!-- 分享弹窗 -->
		<u-popup :show="showReportPopup" :round="18" @click="handleReportClose">
			<view style="position: relative;">
				<view class="popup-title">举报页面</view>
				<view class="popup-close" @click="handleReportClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="">
					<view> </view>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹窗 -->
		<u-popup :show="showSharePopup" :round="18" @close="handleShareClose">
			<view style="position: relative;">
				<view class="popup-title">分享给熟人</view>
				<view class="popup-close" @click="handleShareClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="share-list">
					<view class="share-item">
						<button class="share-box-btn" open-type="share"></button>
						<image src="https://static.wddzq.com/static/wechat.png" />
						<view>发给好友</view>
					</view>
					<view class="share-item" @click="handleShareImgClick">
						<image src="https://static.wddzq.com/static/qr.png" />
						<view>生成二维码</view>
					</view>
					<view class="share-item">
						<image src="https://static.wddzq.com/static/copy.png" />
						<view>复制活动信息</view>
					</view>
				</view>
				<view class="share-content">
					<view class="share-title"> 选择模板生成海报
						<!-- <Icon type="ios-arrow-round-down" /> -->
					</view>
					<view class="share-temp">
						<!-- <view class="share-temp-item" @click="handleCheckClick">
							<image class="share-temp-img" src="https://static.wddzq.com/static/temp_one.png"></image>
							<view>简约</view>
							<image style="width: 36rpx;height: 36rpx;position: absolute;right: 20rpx;bottom: 20rpx;"
								:src="checked ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'">
							</image>
						</view> -->
						<view class="share-temp-item" @click="handleCheckClick">
							<image class="share-temp-img" src="https://static.wddzq.com/static/temp_one.png"></image>
							<view>经典</view>
						</view>
						<view class="share-temp-item" @click="handleCheckClick">
							<image class="share-temp-img" src="https://static.wddzq.com/static/temp_one.png"></image>
							<view>潮流</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showShareImg" :round="18" @close="handleShareImgClose">
			<canvas canvas-id="myCanvas" style="width: 600px;height:855px; position: fixed;top: -10000px;"></canvas>
			<view style="position: relative;">
				<image @longpress="saveShareImg(canvasToTempFilePath)"
					style="width: 500rpx;height: 713rpx;position: absolute;left: 50%;margin-left: -250rpx;top: -750rpx;"
					:src="canvasToTempFilePath"></image>
			</view>
			<!-- <view style="display: flex;align-items: center;justify-content: center;background-color: #f2f2f2;">
				<view  style="margin-top: 30rpx;">
					<text style="font-size: 32rpx;color: #666">保存图片</text>
				</view>
			</view> -->
			<view style="background-color: #fff;border-top-right-radius: 18rpx;border-top-left-radius: 18rpx;">
				<view @click="saveShareImg(canvasToTempFilePath)"
					style="height: 100rpx;line-height: 100rpx;text-align: center;font-size: 32rpx;color: #333;">保存图片
				</view>
				<view @click="handleShareImgClose"
					style="height: 100rpx;line-height: 100rpx;text-align: center;font-size: 32rpx;color: #999;">取消
				</view>
			</view>
		</u-popup>

		<tui-cinfo-header :refresh="refresh"></tui-cinfo-header>
	</view>
</template>

<script>
	import {
		getActivityDetail,
		userSignUpActivity
	} from '../../config/api.js';
	import {
		to,
		isLogin,
		getUserInfoDetail,
		getSystemInfo,
		pxToRpx
	} from '../../config/utils.js';

	export default {
		data() {
			return {
				club: {
					authenticationType: 2,
					clubAddress: "",
					clubLat: 0,
					clubLng: 0,
					clubLocationName: "",
					clubName: "",
					clubPic: [],
					clubTel: "",
					jobName: "",
					remark: ""
				},
				current: 0,
				params: '',
				listShow: false,
				showPhone: false,
				showWechat: false,
				showActiveWechat: false,
				showActivePhone: false,
				showReportPopup: false,
				detail: {},
				currentPerson: {},
				images: [],
				refresh: 0,
				share: false,
				headerHeight: 64,
				showSharePopup: false,
				showShareImg: false,
				checked: true,

				// canvas
				ratio: 1,
				ctx: null, // 创建canvas对象
				canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
				openStatus: true, // 声明一个全局变量判断是否授权保存到相册
				share_qrcode_flag: false,
				num: 0,
			}
		},
		onLoad(params) {
			console.log(params);
			this.params = params;

			let system = getSystemInfo();
			if (system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		onShow() {
			this.fetchActivityDetail();
		},
		onReady() {
			let pages = getCurrentPages();
			if (pages.length <= 1) {
				this.share = true;
			}
		},
		onShareAppMessage() {
			// this.onShareAppMessage()
			// const promise = new Promise(resolve => {
			// 	setTimeout(() => {
			// 		resolve({
			// 			title: '自定义转发标题'
			// 		})
			// 	}, 2000)
			// })
			return {
				title: this.detail?.title + '-' + this.detail?.describeContent,
				path: `/pages/detail/detail?activityId=${this.detail?.id}`,
				imageUrl: this.detail?.picFirst,
			};
		},
		methods: {
			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.club = {
									...that.club,
									clubLat: res.latitude,
									clubLng: res.longitude,
									clubAddress: res.address,
									clubLocationName: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			navigateToPack() {
				const productId = this?.detail?.merchantProductVO?.id;
				if (!productId) {
					return uni.showToast({
						title: 'id不存在',
						icon: 'error'
					});
				} else {
					uni.navigateTo({
						url: `/pages/pack/pack?productId=${productId}`
					})
				}
			},
			/**
			 * 绘制图片
			 */
			//获取图片信息
			downloadFileImg(url) {
				return new Promise(resolve => {
					uni.getImageInfo({
						src: url,
						success: res => {
							resolve(res.path);
						},
						fail: err => {
							console.log(err);
							uni.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});
			},

			handleCheckClick() {
				this.checked = !this.checked;
			},
			// 生成海报
			async createCanvasImage(data) {
				if (this.canvasToTempFilePath) return;
				// 点击生成海报数据埋点
				if (!this.ctx) {
					uni.showLoading({
						title: '生成中...'
					});
					let code = this.downloadFileImg(data.erCodeUrl);
					let poster = this.downloadFileImg(data.picFirst);
					let address = this.downloadFileImg('https://static.wddzq.com/static/huodongdidian_detail.png')
					let date = this.downloadFileImg('https://static.wddzq.com/static/huodongshijian_detail.png')
					let bgUrl = '';
					if (data.bgUrl) {
						bgUrl = new Promise(resolve => {
							uni.downloadFile({
								//生成临时地址
								url: data.bgUrl,
								success: res => {
									resolve(res.tempFilePath);
								},
								fail: erros => {
									uni.showToast({
										title: '网络错误请重试',
										icon: 'loading'
									});
								}
							});
						});
					}
					Promise.all([code, poster, address, date, bgUrl]).then(result => {
						const ctx = uni.createCanvasContext('myCanvas', this);
						let canvasWidth = 600,
							canvasHeight = 855 * this.ratio,
							canvasWidthPx = 600 * this.ratio,
							canvasHeightPx = 855 * this.ratio,
							codeurl_width = 130, //绘制的二维码宽度
							codeurl_heigth = 130, //绘制的二维码高度
							codeurl_x = 446, //绘制的二维码在画布上的位置
							codeurl_y = 677, //绘制的二维码在画布上的位置
							coverurl_width = 546, //绘制的封面宽度
							coverurl_heigth = 551, //绘制的封面高度
							coverurl_x = 24, //绘制的封面在画布上的位置
							coverurl_y = 34, //绘制的封面在画布上的位置
							padding_top = 34, // 顶部内边距
							padding_lr = 24;

						if (data.bgUrl) {
							ctx.drawImage(result[3], 0, 0, canvasWidth, canvasHeight); // 背景图片需要本地
						} else {
							//绘制圆角矩形
							ctx.save();
							ctx.translate(0, 0);
							//绘制圆角矩形的各个边
							this.drawRoundRectPath(ctx, canvasWidth, canvasHeight, 14);
							ctx.fillStyle = data.fillStyle || '#fff'; //若是给定了值就用给定的值否则给予默认值
							ctx.fill();
							ctx.restore();
						}

						ctx.save(); // 先保存状态 已便于画完圆再用
						ctx.beginPath(); //开始绘制
						ctx.setFillStyle('#333333');
						if (data.title) {
							this.dealWords({
								ctx: ctx, //画布上下文
								fontSize: 36, //字体大小
								word: data.title, //需要处理的文字
								maxWidth: 500, //一行文字最大宽度
								x: padding_lr, //文字在x轴要显示的位置
								y: padding_top + coverurl_heigth + 20, //文字在y轴要显示的位置
								maxLine: 2 //文字最多显示的行数
							});
						}

						ctx.font = 'normal normal 24px sans-serif';
						ctx.setFillStyle('#666666'); // 文字颜色
						this.dealWords({
							ctx: ctx, //画布上下文
							fontSize: 24, //字体大小
							word: data?.distanceShow + ' | ' + data?.locationName, //需要处理的文字
							maxWidth: 400, //一行文字最大宽度
							x: padding_lr + 24 + 10, //文字在x轴要显示的位置
							y: padding_top + coverurl_heigth + 20 + 20 + 20 + 35, //文字在y轴要显示的位置
							maxLine: 1 //文字最多显示的行数
						});

						this.dealWords({
							ctx: ctx, //画布上下文
							fontSize: 24, //字体大小
							word: data.dateShow, //需要处理的文字
							maxWidth: 400, //一行文字最大宽度
							x: padding_lr + 24 + 10, //文字在x轴要显示的位置
							y: padding_top + coverurl_heigth + 20 + 20 + 20 + 35 + 50, //文字在y轴要显示的位置
							maxLine: 1 //文字最多显示的行数
						});

						// 地址图标
						ctx.drawImage(result[2], padding_lr, padding_top + coverurl_heigth + 20 + 20 + 20 +
							35 + 15, 29, 29); // 绘制封面
						// 时间图标
						ctx.drawImage(result[3], padding_lr, padding_top + coverurl_heigth + 20 + 20 + 20 +
							35 + 50 + 15, 27, 29); // 绘制封面

						// 绘制封面
						this.circleImgTwo(ctx, result[1], coverurl_x, coverurl_y, coverurl_width,
							coverurl_heigth, 16);
						// ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth); // 绘制封面

						// 绘制二维码
						ctx.drawImage(result[0], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制封面

						ctx.draw(false, () => {
							// canvas画布转成图片并返回图片地址
							uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									width: canvasWidth,
									height: canvasHeight,
									destWidth: canvasWidth,
									destHeight: canvasHeight,
									success: res => {
										this.canvasToTempFilePath = res.tempFilePath;
										this.showShareImg = true;
										uni.showToast({
											title: '绘制成功'
										});
									},
									fail: err => {
										uni.showToast({
											title: '绘制失败'
										});
									},
									complete: () => {
										uni.hideLoading();
										uni.hideToast();
									}
								},
								this
							);
						});
					});
				}
			},

			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制, 弧度从0到1/2PI
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线
				cxt.lineTo(radius, height);

				//左下角圆弧, 弧度从1/2PI到PI
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线
				cxt.lineTo(0, radius);

				//左上角圆弧, 弧度从PI到3/2PI
				cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

				//上边线
				cxt.lineTo(width - radius, 0);

				//右上角圆弧
				cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

				//右边线
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},

			circleImgTwo(ctx, img, x, y, w, h, r) { // 画一个图形
				if (w < 2 * r) r = w / 2;
				if (h < 2 * r) r = h / 2;
				ctx.save();
				ctx.beginPath();
				ctx.moveTo(x + r, y);
				ctx.arcTo(x + w, y, x + w, y + h, r);
				ctx.arcTo(x + w, y + h, x, y + h, r);
				ctx.arcTo(x, y + h, x, y, r);
				ctx.arcTo(x, y, x + w, y, r);
				ctx.closePath();
				ctx.strokeStyle = '#FFFFFF'; // 设置绘制圆形边框的颜色ctx.stroke();
				ctx.clip();
				ctx.drawImage(img, x, y, w, h);
				ctx.restore();
			},
			//处理文字多出省略号显示
			dealWords(options) {
				options.ctx.setFontSize(options.fontSize); //设置字体大小
				let allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth); //实际总共能分多少行
				let count = allRow >= options.maxLine ? options.maxLine : allRow; //实际能分多少行与设置的最大显示行数比, 谁小就用谁做循环次数
				let endPos = 0; //当前字符串的截断点
				for (let j = 0; j < count; j++) {
					let nowStr = options.word.slice(endPos); //当前剩余的字符串
					let rowWid = 0; //每一行当前宽度
					if (options.ctx.measureText(nowStr).width > options.maxWidth) {
						//如果当前的字符串宽度大于最大宽度, 然后开始截取
						for (let m = 0; m < nowStr.length; m++) {
							rowWid += options.ctx.measureText(nowStr[m]).width; //当前字符串总宽度
							if (rowWid > options.maxWidth) {
								if (j === options.maxLine - 1) {
									//如果是最后一行
									options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) *
										40); //(j+1)*18这是每一行的高度
								} else {
									options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 40);
								}
								endPos += m; //下次截断点
								break;
							}
						}
					} else {
						//如果当前的字符串宽度小于最大宽度就直接输出
						options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 40);
					}
				}
			},

			// 保存到系统相册
			saveShareImg(canvasToTempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: canvasToTempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功, 快去分享到朋友圈吧~',
							icon: 'none'
						})
						// this.$u.toast('保存成功, 快去分享到朋友圈吧~');
					},
					fail: () => {
						// this.$u.toast('保存失败~');
						uni.showToast({
							title: '保存失败~',
							icon: 'none'
						})
					}
				});
			},

			handleToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			handleBack() {
				uni.navigateBack();
			},
			handleMapClick() {
				this.showActivePhone = true;
			},
			handleReportClick() {
				// this.showReportPopup = true;
				uni.navigateTo({
					url: '/pages/report/report'
				})
			},
			handleReportClose() {
				this.showReportPopup = false;
			},
			handleConnectionClick() {
				this.showActivePhone = true;
			},
			handleGroupClick() {
				this.showActivePhone = true;
			},
			handleHelpGroupClick() {
				uni.navigateTo({
					url: '/pages/help-group/help-group'
				})
			},
			handleShareClick() {
				this.showSharePopup = true;
				this.num++;
			},
			handleShareClose() {
				this.showSharePopup = false;
			},
			handleShareImgClick() {
				if (!this.checked) {
					return uni.showToast({
						title: '请先选择模板!'
					})
				}
				this.showShareImg = true;
				this.handleShareClose();
				this.createCanvasImage(this.detail);
			},
			handleShareImgClose() {
				this.showShareImg = false;
			},
			onShareAppMessage() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: detail?.title + detail?.describeContent,
							path: `pages/detail/detail?activityId=${detail?.id}`,
							imageUrl: detail?.picFirst,
						})
					}, 2000)
				})


				return {
					title: detail?.title + detail?.describeContent,
					path: `pages/detail/detail?activityId=${detail?.id}`,
					imageUrl: detail?.picFirst,
					promise
				};
				// uni.share({
				// 	provider: 'weixin',
				// 	scene: "WXSceneSession",
				// 	type: 5,
				// 	imageUrl: data?.data?.picFirst,
				// 	title: data?.data?.title,
				// 	miniProgram: {
				// 			id: data?.data?.id,
				// 			path: `pages/detail/detail?activityId=${data?.data?.id}`,
				// 			type: 0,
				// 			// webUrl: 'http://uniapp.dcloud.io'
				// 	},
				// 	success: ret => {
				// 			console.log(JSON.stringify(ret));
				// 	}
				// });
			},
			toUserPersonal(userId) {
				uni.navigateTo({
					url: `/pages/personal/personal?userId=` + userId
				})
			},
			handleLoadImage(e) {
				const {
					detail,
					currentTarget
				} = e;
				const {
					width,
					height
				} = detail || {};
				const {
					index
				} = currentTarget.dataset || {};
				let system = getSystemInfo();
				const {
					screenHeight,
					screenWidth
				} = system || {};
				if (screenWidth) {
					let _width = screenWidth;
					let _height = screenWidth * height / width;
					this.images[index] = {
						width: _width,
						height: pxToRpx(_height)
					};

				}
				console.log(width, height, index, this.images);
			},
			handleSwiperChange(e) {
				this.current = e.current;

			},
			handleSwiperClick(index) {
				uni.previewImage({
					current: index,
					urls: this.detail?.picListV2?.split('|') || []
				})
			},
			clickCreateUserWechat() {
				if (this.detail.signUpStatus == 2) {

					this.handleOpenWechat();
				} else {
					uni.showToast({
						title: "报名成功后查看",
						icon: 'error'
					});
				}

			},
			clickCreateUserPhone() {
				if (this.detail.signUpStatus == 2) {
					this.handleOpenPhone();
				} else {
					uni.showToast({
						title: "报名成功后查看",
						icon: 'error'
					});
				}
			},
			handleListOpen() {
				this.listShow = true;
			},
			handleListClose() {
				this.listShow = false;
			},
			async fetchActivityDetail() {
				const [err, data] = await to(getActivityDetail({
					activityId: this.params?.activityId
				}));
				if (err) {
					return uni.showToast({
						title: err?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
				if (data.success) {
					this.detail = data?.data || {};
				} else {
					return uni.showToast({
						title: data?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
			},

			// 报名
			async handleSubmit() {
				if (!isLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return;
				}
				if (this.detail.signUpCount >= this.detail.maxSignUpCount) {
					return uni.showToast({
						title: '报名人数已满',
						icon: "none"
					})
				}
				let userInfo = getUserInfoDetail();
				if (!userInfo?.nickname || !userInfo?.gender) {
					this.refresh = Math.random();
					return;
				}

				uni.navigateTo({
					url: `/pages/application/application?id=${this.detail.id}`
				})

			},
			handleOpenWechat() {
				this.showWechat = true;
			},
			handleCloseWechat() {
				this.showWechat = false;
			},
			handleClosePhone() {
				this.showPhone = false;
			},
			handleOpenPhone() {
				this.showPhone = true;
			},

			handleOpenActiveWechat(item) {
				this.currentPerson = item;
				this.showActiveWechat = true;
			},
			handleCloseActiveWechat() {
				this.showActiveWechat = false;
			},
			handleCloseActivePhone() {
				this.showActivePhone = false;
			},
			handleOpenActivePhone(item) {
				this.currentPerson = item;
				this.showActivePhone = true;
			},

			handleCallPhone() {
				if (!this.detail?.createUser?.phone) {
					return uni.showToast({
						title: '未获取到手机号',
						icon: "none"
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.detail?.createUser?.phone
				});
			},
			handleCopyWechat() {
				if (!this.detail?.createUser?.wechat) {
					return uni.showToast({
						title: '未获取到微信号',
						icon: "none"
					})
				}
				uni.setClipboardData({
					data: this.detail?.createUser?.wechat,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},
			handleCallActivePhone() {
				if (!this.currentPerson?.phone) {
					return uni.showToast({
						title: '未获取到手机号',
						icon: "none"
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.currentPerson?.phone
				});
			},
			handleCopyActiveWechat() {
				if (!this.currentPerson?.wecaht) {
					return uni.showToast({
						title: '未获取到微信号',
						icon: "none"
					})
				}
				uni.setClipboardData({
					data: this.currentPerson?.wecaht,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},
			handleMapLocation() {
				uni.openLocation({
					latitude: this.detail.latitude,
					longitude: this.detail.longitude,
					address: this.detail.address,
					name: this.detail.locationName
				})
			},
		}
	}
</script>

<style lang="scss">
	.tab-container {
		display: flex;
		position: relative;
		z-index: 1000;
		height: 80rpx;
		width: 50%;
		display: flex;
		padding-left: 28rpx;
		justify-content: space-around;
	}

	.tab-item {
		display: flex;
		justify-content: space-around;
		position: relative;
		margin-right: 20rpx;
		height: 52rpx;
		font-size: 28rpx;
		color: #666363;
	}

	.activeTab::after {
		position: absolute;
		content: ' ';
		left: 0rpx;
		bottom: 0rpx;
		width: 110rpx;
		height: 8rpx;
		background-color: #92E7EC;
		z-index: 99;
	}

	.activeTab {
		position: relative;
		z-index: 100;
		font-family: Source Han Sans;
		line-height: normal;
		font-weight: bold;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 24rpx;
	}

	.br {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.m-24 {
		margin: 24rpx;
	}

	.mb-18 {
		margin-bottom: 18rpx;
	}

	.p-22 {
		padding: 22rpx;
	}

	.active-item-top {
		padding: 34rpx 22rpx 24rpx 22rpx;
		background-color: #fff;
		margin-top: -30rpx;
		border-radius: 28rpx 28rpx 0 0;
		position: relative;
		z-index: 1000;
	}

	.active-item-bg {
		position: absolute;
		top: -55rpx;
		right: 0;
		width: 152rpx;
		height: 152rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-size: 100% 100%;
		background-image: url('https://static.wddzq.com/static/jiagebeijing.png');
	}

	.active-item-header {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.active-item-right {
		margin-left: 18rpx;
	}

	.active-item-right-text {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.active-text {
		font-size: 28rpx;
		color: #3D3D3D;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.active-item-right-text-unit {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.active-item-right-text-price {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 28rpx;
	}

	.active-addr {
		/* margin-top: 12rpx; */
	}

	.active-addr,
	.active-time {
		font-size: 24rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

	.active-name {
		font-size: 30rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

	.active-item-wrapper {
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 16rpx;
	}

	.active-header-wrapper {
		display: flex;
		justify-content: left;
		align-items: center;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #eee;
	}

	.header-title-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.header-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.active-content-wrapper {
		display: flex;
		padding-top: 32rpx;
	}

	.content-image {
		width: 140rpx;
		height: 140rpx;
		background: white;
		border-radius: 16rpx;
		margin-right: 16rpx;
	}

	.active-content-text-wrapper {
		display: flex;
		flex-direction: column;
		width: 530rpx;
	}

	.content-text-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	.content-text-des {
		font-size: 24rpx;
		font-weight: 400;
		color: #999;
		margin-top: 16rpx;
		margin-bottom: 18rpx;
	}

	.content-text-widget-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.content-text-price-wrapper {
		display: flex;
		align-items: baseline;
		margin-right: 4rpx;
	}

	.content-text-price-icon {
		font-size: 22rpx;
		font-weight: 600;
		color: #FF8F1F;
	}

	.content-text-price {
		font-size: 34rpx;
		font-weight: 600;
		color: #FF8F1F;
	}

	.content-text-icon {
		background: rgba(255, 143, 31, 0.1);
		border-radius: 8rpx;
		border: 1rpx solid rgba(255, 143, 31, 0.3);
		padding: 0 8rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FF8F1F;
		height: 34rpx;
		line-height: 34rpx;
		margin-right: 8rpx;
	}

	.content-text-original-price {
		font-size: 26rpx;
		font-weight: 400;
		color: #AAAAAA;
		text-decoration: line-through;
	}

	.active-member {
		background-color: #fff;
		border-radius: 18rpx;
	}

	.active-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.active-number {
		display: flex;
		align-items: center;
	}

	.active-number text {
		font-size: 28rpx;
		color: #FFB803;
		// margin-right: 20rpx;
	}

	.active-images {
		width: 100%;
		display: flex;
		overflow-x: auto;
	}

	.active-images-item {
		position: relative;
		margin-right: 44rpx;
	}

	.active-image-avator {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.active-image-sex {
		position: absolute;
		right: 0rpx;
		bottom: 4rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		border: 3rpx solid #fff;
	}

	.box {
		background-color: #fff;
	}

	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 24rpx;
	}

	.content {
		font-size: 28rpx;
		color: #666;
	}

	.content image {
		width: 100%;
		padding: 0;
		height: 484rpx;
	}

	.active-boss {
		display: flex;
		align-items: center;
	}

	.active-boss-img {
		width: 74rpx;
		height: 74rpx;
		border-radius: 37rpx;
	}

	.active-boss-info {
		flex: 1;
		margin-left: 12rpx;
	}

	.active-boss-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 18rpx;
	}

	.active-boss-info view {
		display: flex;
		align-items: center;
	}

	.active-boss-info view image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.active-boss-info view text {
		font-size: 24rpx;
		color: #333;
	}

	.active-lx {
		margin-left: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.active-lx image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin-bottom: 12rpx;
	}

	.active-lx text {
		font-size: 24rpx;
		color: #333;
	}

	.active-bottom {
		display: flex;
		justify-content: space-between;
		padding-left: 64rpx;
		padding-right: 48rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 16rpx 28rpx 94rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.02);
		z-index: 1000;
	}

	.chat-btn {
		margin: auto 0;
		width: 44rpx;
		height: 44rpx;
	}

	.share-box {
		display: flex;
		flex-direction: column;
		margin: auto 0;
	}

	.share-box2 {
		display: flex;
		flex-direction: column;
		margin: auto 0;
	}

	.share-box image {
		width: 32rpx;
		height: 32rpx;
		margin: 0 8rpx;
	}

	.share-box text {
		font-size: 24rpx;
		color: #666;
	}

	.share-box-text {
		margin-top: 4rpx;
		width: 48rpx;
		height: 34rpx;
		font-size: 24rpx;
		color: #9F9F9F;
		align-items: center;
	}

	.share-box-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.share-btn {
		//flex: 1;
	}

	.share-btn-bm {
		font-size: 30rpx;
		color: #fff;
		font-weight: normal;
	}

	.share-btn-yh {
		font-size: 20rpx;
		color: #FFB803;
	}

	/* 参加人员列表 */
	.popup-title {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #222;
		margin-top: 48rpx;
		margin-bottom: 58rpx;
	}

	/* 弹窗 */
	.popup-close {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.member-list {
		padding: 24rpx;
		max-height: 500rpx;
		overflow: auto;
	}

	.member-item {
		display: flex;
		align-items: center;
		margin-bottom: 54rpx;
	}

	.member-item>image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 43rpx;
		margin-right: 12rpx;
	}

	.member-item .member-content {
		display: flex;
		align-items: center;
	}

	.member-box {}

	.member-content .member-title {
		font-size: 28rpx;
		color: #333;
		margin-right: 12rpx;
	}

	.member-content image {
		width: 28rpx;
		height: 28rpx;
	}

	.member-content .member-concat {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.member-desc {
		font-size: 24rpx;
		color: #aaa;
	}


	/* 弹窗 */
	.modal-close {
		position: absolute;
		top: -60rpx;
		right: -60rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-img {
		position: absolute;
		top: -250rpx;
		left: 0;
		width: 200rpx;
		height: 250rpx;
	}

	.modal-title {
		font-size: 28rpx;
		text-align: center;
		font-weight: bold;
		color: #000;
	}

	.modal-content {
		font-size: 28rpx;
		text-align: center;
		color: #666;
		margin-top: 48rpx;
		margin-bottom: 32rpx;
	}

	.modal-phone {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.phone-number {
		display: flex;
		justify-content: center;
		font-size: 48rpx;
		color: #333;
	}

	.modal-phone text {
		font-size: 24rpx;
		color: #666;
	}

	.share-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}

	.share-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.share-item image {
		width: 124rpx;
		height: 124rpx;
	}

	.share-item view {
		margin-top: 28rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}

	.share-content {
		margin: 0 20rpx;
		border-top: 2rpx solid #f2f2f2;
		background-color: #ffffff;
	}

	.share-title {
		height: 28rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
		text-align: center;
		padding-top: 36rpx;
		padding-bottom: 32rpx;
	}

	.share-temp {
		display: flex;
		justify-content: center;
		padding-bottom: 72rpx;
	}

	.share-temp-item {
		position: relative;
	}

	.share-temp-item view {
		text-align: center;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 33rpx;
	}

	.share-temp .share-temp-img {
		width: 202rpx;
		height: 288rpx;
		margin-right: 26rpx;
	}

	.share-temp image:last-child {
		margin-right: 0;
	}

	.swiperTop {
		position: relative;

		.swiperBottom {
			position: absolute;
			top: 202rpx;
			height: 530rpx;
			width: 100%;
			background: linear-gradient(180deg, rgba(51, 57, 57, 0), #353839 33%);
			box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
			padding-left: 26rpx;

			.swiperTitle {
				padding-top: 100rpx;
				color: #FFFFFF;
				font-size: 40rpx;
			}

			.swiper-padding {}
		}
	}
</style>